<template>
  <div id="background">

    <div id="">
      <h1>aaa</h1>
      <button @click="aa">休息</button>
    </div>
    <div id="kapian">

    </div>
    <div id="huakuai">

    </div>

  </div>
</template>

<script>
export default {
methods: {
  aa(){
    this.$router.push('/xiuxi')
  }
},
}
</script>

<style scpoed> 

#background{
  display: flex;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    cyan,
    purple
  );
  background-size: 400%;
  animation: myanimation 10s infinite;
}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}
</style>